---
title: Despliega tu proyecto de Astro en Netlify
description: Cómo desplegar tu proyecto de Astro usando Netlify.
type: deploy
i18nReady: true
---
import ReadMore from '~/components/ReadMore.astro'

[Netlify](https://netlify.com) ofrece servicios de alojamiento y servicios serverless para aplicaciones web y sitios estáticos. ¡Cualquier proyecto de Astro puede ser alojado en Netlify!

Esta guía contiene instrucciones para hacer despliegues en Netlify a través de la interfaz web o la CLI de Netlify.

## Configuración del Proyecto

Tu proyecto de Astro puede ser desplegado en Netlify de tres maneras distintas: como un sitio estático, un sitio con renderizado en el servidor (SSR), o un sitio renderizado en _edge computing_.

### Sitio Estático

Tu proyecto de Astro es un sitio estático por defecto. No necesitas ninguna configuración adicional para desplegar un sitio estático de Astro en Netlify.

### Adaptador para SSR

Para habilitar SSR en tu proyecto de Astro y hacer un despliegue en Netlify, incluyendo el uso de funciones edge de Netlify:

Añade [el adaptador de Netlify](/es/guides/integrations-guide/netlify/) a tu proyecto de Astro con el siguiente comando `astro add` que se muestra debajo. Este instalará el adaptador y hará los cambios apropiados a tu archivo `astro.config.mjs` en un solo paso.

```bash
npx astro add netlify
```

Si prefieres instalar el adaptador manualmente, sigue los siguientes dos pasos:

1. Añade [el adaptador de `@astrojs/netlify`](https://github.com/withastro/astro/tree/main/packages/integrations/netlify) a las dependencias de tu proyecto usando tu gestor de paquetes preferido. Si estás usando npm o no estás seguro, ejecuta esto en la terminal:

    ```bash
      npm install @astrojs/netlify
    ```

2. Añade dos nuevas lineas a tu archivo de configuración del proyecto `astro.config.mjs`.

    ```js title="astro.config.mjs" ins={2, 5-6}
    import { defineConfig } from 'astro/config';
    import netlify from '@astrojs/netlify';

    export default defineConfig({
      output: 'server',
    adapter: netlify(),
    });
    ```

    También puedes desplegar tu proyecto usando las funciones edge de Netlify añadiendo `edgeMiddleware: true` a la configuración del adaptador de Netlify:
    
    ```diff lang="js"
      // astro.config.mjs
      import { defineConfig } from 'astro/config';
      import netlify from '@astrojs/netlify/functions';

      export default defineConfig({
        output: 'server',
        adapter: netlify({
    +     edgeMiddleware: true
        }),
      });
    ```

## Cómo desplegar

Puedes hacer despliegues en Netlify a través de la interfaz web o usando la CLI de Netlify (interfaz de línea de comandos). El proceso es el mismo para ambos sitios estáticos y sitios con SSR.

### Despliegue con la Interfaz Web

Si tu proyecto está alojado en GitHub, GitLab, BitBucket, o Azure DevOps, puedes usar la interfaz web de Netlify para desplegar tu proyecto de Astro.

1. Haz click en <kbd>Add a new site</kbd> en tu [Netlify dashboard](https://app.netlify.com/)

2. Selecciona <kbd>Import an existing project</kbd>

    Cuando importes tu proyecto de Astro desde tu proveedor de Git, Netlify debería detectarlo automáticamente y preconfigurar los ajustes correctos para ti.

3. Asegúrate de que los siguientes ajustes sean ingresados, luego presiona el botón <kbd>Deploy</kbd>:

    - **Build Command:** `astro build` o `npm run build`
    - **Publish directory:** `dist`

 Una vez desplegado, serás redirigido a la página de vista general. Ahí, puedes editar los detalles de tu sitio.

Cualquier cambio futuro al repositorio de tu proyecto provocará despliegues de vista previa y producción basados en tu configuración de despliegue.

#### Archivo `netlify.toml`

Opcionalmente, puedes crear el archivo `netlify.toml` en la raíz del repositorio de tu proyecto para configurar tu comando de build y el directorio a publicar, así como otros ajustes del sitio, incluyendo variables de entorno y redirecciones. Netlify leerá este archivo y configurará de manera automática tu despliegue.

Para configurar los ajustes por defecto, crea un archivo `netlify.toml` con la siguiente configuración:

```toml
[build]
  command = "npm run build"
  publish = "dist"
```

<ReadMore>Más información en [“Deploying an existing Astro Git repository”](https://www.netlify.com/blog/how-to-deploy-astro/#deploy-an-existing-git-repository-to-netlify) en el blog de Netlify</ReadMore>

### Despliegue con CLI

También puedes crear un nuevo sitio en Netlify y vincularlo a tu repositorio de Git instalando y usando la [CLI de Netlify](https://cli.netlify.com/).

1. Instala la CLI de Netlify de manera global

    ```bash
    npm install --global netlify-cli
    ```

2. Ejecuta `netlify login` y sigue las instrucciones para iniciar sesión y autorizar a Netlify
3. Ejecuta `netlify init` y sigue las instrucciones
4. Confirma tu comando de build (`astro build`)

    La CLI detectará automáticamente la configuración de build (`astro build`) y el directorio a desplegar (`dist`), y ofrecerá generar automáticamente [un archivo `netlify.toml`](#archivo-netlifytoml) con esos ajustes.

5. Genera tu sitio y despliega enviando tus cambios a Git

    La CLI añadirá una deploy key al repositorio, lo que significa que tu sitio será generado automáticamente en Netlify cada vez que envíes tus cambios con `git push`.

<ReadMore>Más detalles de Netlify en [Deploy an Astro site using the Netlify CLI](https://www.netlify.com/blog/how-to-deploy-astro/#link-your-astro-project-and-deploy-using-the-netlify-cli)</ReadMore>

### Establece una Versión de Node.js

Si estás usando una [build image](https://docs.netlify.com/configure-builds/get-started/#build-image-selection) antigua (Xenial) en Netlify, asegúrate que tu versión de Node.js esté configurada. Astro requiere `v18.14.1` o mayor.

Puedes [especificar tu versión de Node.js en Netlify](https://docs.netlify.com/configure-builds/manage-dependencies/#node-js-and-javascript) usando:
- Un archivo [`.nvmrc`](https://github.com/nvm-sh/nvm#nvmrc) en tu directorio raíz.
- Una variable de entorno `NODE_VERSION` en los ajustes de tu sitio utilizando el dashboard de Netlify.

## Usando Netlify Functions

No se necesita configuración adicional para usar Netlify Functions con Astro. ¡Añade un directorio `netlify/functions` a la raíz de tu proyecto y sigue [la documentación de Netlify Functions](https://docs.netlify.com/functions/overview/) para comenzar!

## Ejemplos

- [How to deploy an Astro site](https://www.netlify.com/blog/how-to-deploy-astro/) — Netlify Blog
- [Deploy An Astro site with Forms, Serverless Functions, and Redirects](https://www.netlify.com/blog/deploy-an-astro-site-with-forms-serverless-functions-and-redirects/) — Netlify Blog
- [Deployment Walkthrough Video](https://youtu.be/GrSLYq6ZTes) — Netlify YouTube channel
